<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U9GPpEDv7Vm3DPXUdGksRmPLHC0SGl4s">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../plugins/elementui/index.js"></script>


</head>

<body class="hold-transition">
<!--创建地图容器元素-->
<div id="container"></div>
<script type="text/javascript">

    var markerArr = [];//定义存放地图信息的集合
    //发送ajax请求获取数据
    axios.get("/address/findAll.do").then((res) => {
        if (res.data.flag) {
            markerArr = res.data.data
        }
    });

    function map_init() {
        var map = new BMap.Map("container"); // 创建Map实例
        var point = new BMap.Point(114.308711, 30.597472); //地图中心点，武汉市
        map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。
        map.enableScrollWheelZoom(true); //启用滚轮放大缩小
        //向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //向地图中添加缩略图控件
        var ctrlOve = new window.BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrlOve);

        //向地图中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);

        var point = new Array(); //存放标注点经纬信息的数组
        var marker = new Array(); //存放标注点对象的数组
        var info = new Array(); //存放提示信息窗口对象的数组
        for (var i = 0; i < markerArr.length; i++) {
            var p0 = markerArr[i].lng;
            var p1 = markerArr[i].lat; //将地图点坐标的经纬度分别提出来
            point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
            marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
            map.addOverlay(marker[i]);
            marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            var label = new window.BMap.Label(markerArr[i].addressName, {offset: new window.BMap.Size(20, -10)});
            marker[i].setLabel(label);
            info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].addressName + "</p>"); // 创建信息窗口对象
        }
        marker[0].addEventListener("mouseover", function () {
            this.openInfoWindow(info[0]);
        });
        marker[1].addEventListener("mouseover", function () {
            this.openInfoWindow(info[1]);
        });
        marker[2].addEventListener("mouseover", function () {
            this.openInfoWindow(info[2]);
        });
    }

    //异步调用百度js
    function map_load() {
        var load = document.createElement("script");
        load.src = "http://api.map.baidu.com/api?v=2.0&ak=U9GPpEDv7Vm3DPXUdGksRmPLHC0SGl4s&callback=map_init";
        document.body.appendChild(load);
    }

    window.onload = map_load;
</script>
</body>
</html>